<template>
<form method="post">
  <div id="container">
    <div class="content">
      <div class="tit">
        <a>首页</a>&gt;
        <a>行业动态</a>&gt;
        <a>最新信息</a>
      </div>
      <div class="news">
        <div class="news_l">
          <div class="submenu_m">
            <a v-for="sub in subMenus" @click="listQuery.type2 = sub.label;fetchList()"
              :class="sub.label == listQuery.type2 ? 'current' : ''">{{sub.label}}</a>
          </div>
          <div class="news_select">
            <select id="newsType" v-model="listQuery.type2" @change="fetchList()">
              <option value="">全部</option>
              <option v-for="sub in subMenus" :value="sub.label">{{sub.label}}</option>
            </select>
            <div class="sel">
              <input type="text" id="newsKeyword" v-model="listQuery.key" placeholder="请输入关键词" class="seltt">
              <input type="button" value="搜索" @click="fetchList()" id="bt_SearchNews" class="mit">
            </div>
          </div>
          <div class="newslist">
            <ul>
              <li v-for="item in list">
                <a :href="'/newsview?type=1&id='+ item.id">
                  <div class="newspic">
                    <img :src="item.img">
                  </div>
                  <div class="newstext">
                    <h2>{{item.title}}</h2>
                    <i>{{item.createdTime}}</i>
                    <p>{{item.contentTxt.substring(0,40)}}</p>
                    <span>
                    </span>
                  </div>
                </a>
              </li>
            </ul>
          </div>
          <div class="divPage">
            <div class="pages">
              <el-pagination
                style="text-align: center;"
                v-show="total>0"
                :total="total"
                :current-page.sync="listQuery.page"
                :page-size.sync="listQuery.size"
                layout="prev,slot,next"
                prev-text="上一页"
                next-text="下一页"
                @size-change="fetchList"
                @current-change="fetchList"
              >
                <span>{{listQuery.page}}/{{ Math.trunc((total+ listQuery.size-1) / listQuery.size)}}</span>
              </el-pagination>
            </div>
          </div>
        </div>
        <!-- <div class="news_r">
          <div class="submenu">
            <div class="suntit">行业动态</div>
            <ul>
              <li :class="sub.label == listQuery.type2 ? 'current' : ''"
                v-for="sub in subMenus">
                <a @click="listQuery.type2 = sub.label;fetchList()">
                  <p>{{sub.label}}</p>
                </a>
              </li>
            </ul>
          </div>
          <div class="zhaobiao">
            <a>
              <img src="https://kancha-1258911605.cos.ap-guangzhou.myqcloud.com/front/zhaobiao.jpg">
            </a>
          </div>
        </div> -->
      </div>
    </div>
  </div>
</form>
</template>

<script>
import Data from '@/api/data'

export default {
  name: 'Index',
  props:{
    layout: String
  },
  data() {
    return {
      subMenus: [
        {label:"协会新闻", url:""},
        {label:"行业动态", url:""},
        {label:"协会期刊", url:""},
      ],
      list:[],
      total:0,
      listQuery: {
        page: 1,
        size: 10,
        status: "NORMAL",
        type1:"行业动态",
        type2:"",
        key: '',
      }
    }
  },
  watch: {
    month: {

    }

  },
  computed: {
  },
  created() {
    this.listQuery.type2 = this.$route.query.type2
    this.fetchList()
  },
  methods: {
    async fetchList() {
      console.log("请求参数",this.listQuery)
      const res = await Data.get("/article", this.listQuery)
      if (res) {
        this.list = res.list
        this.total = res.total
      }
    },

  }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/new_files_m/bootstrap.min.css";
@import "~@/styles/new_files_m/iconfont.css";
@import "~@/styles/new_files_m/comm.css";
@import "~@/styles/new_files_m/info.css";
</style>
